<template>
  <div class="tabs-demo">
    <h3 class="title">基本</h3>
    <div>
      <d-tabs :datas="param" v-model="selected" @change="change"></d-tabs>
    </div>
    <h3 class="title">使用内置的样式2</h3>
    <div v-bg-color:gray5 style="padding-top:20px;">
      <d-tabs :datas="param" class-name="d-tabs-card" v-model="selected2" @change="change"></d-tabs>
    </div>
    <h3 class="title">使用内置的样式3</h3>
    <div v-bg-color:gray5 v-width="150">
    <d-tabs :datas="param" class-name="d-tabs-menu" v-model="selected3" @change="change"></d-tabs>
  </div>
  </div>
</template>

<script>
export default {
  name: 'tabsDemo',
  data () {
    return {
      param: {
        module1: 'module1',
        module2: 'module2',
        module3: 'module3'
      },
      selected: 'module1',
      selected2: 'module1',
      selected3: 'module1'
    }
  },
  methods: {
    change (data) {
      this.$Message.info(`切换至${data.title}`, 1000)
    }
  }
}
</script>

<style lang="stylus" scoped>
// .tabs-demo
</style>
